<!--
 * @Description: 渲染函数(使用render函数)
 * @Author: zzj
 * @Date: 2021-10-12 09:47:53
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-12 19:53:30
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>渲染函数</title>
	<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.9/vue.js"></script>
</head>
<body>
	<div id="app">
		<briup-list :data="['larry','terry']">
		<h1>列表</h1>
		</briup-list>
	</div>

	<script>
		Vue.component("briup-list",{
			//render函数渲染在beforeMount和mounted之间
			// beforeMount(){
			// 	alert("beforeMount")
			// },
			// mounted(){
			// 	console.log(this.$el)
			// 	alert("mounted")
			// },
			//render函数替换template
			render:function(h){
				// alert("render")
				let lis = this.data.map(item=>{
					return h("li",item)
				})
				//$slots 所有的插槽     default  默认插槽
				let child= [this.$slots.default,...lis]
				return h("ul",{ },child)
			},
			props:{
				data:{
					type:Array,
					default:function(){
						return []
					}
				}
			}
		})


		new Vue({
			el:"#app",
			data:{

			}
		})
	</script>
</body>
</html>